<template>
  <div class="app-container">
    <div class="filter-container">
        <div style="margin:10px;">
          <label ><p>编辑项目：</p></label>
       
        </div>
       
       <el-form ref="dataForm" :rules="rules" :model="temp" label-position="right" label-width="120px" :inline="true" >
        <el-form-item label="类型" prop="type" >
          <el-select v-model="temp.type" class="filter-item" placeholder="项目类型">
            <el-option v-for="item in calendarTypeOptions" :key="item.key" :label="item.display_name" :value="item.key" />
          </el-select>
        </el-form-item>
         <el-form-item label="首页列表图(300px*120px)" prop="logo">
          <el-upload
            class="avatar-uploader"
            :action="domain"
            :data="QiniuData"
            :show-file-list="false"
            :on-remove="handleRemove"
            :on-success="uploadSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="temp.pic" :src="temp.pic" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
         </el-form-item>
          <el-form-item label="背景图(375px*260px)" prop="projectBgimg">
          <el-upload
            class="avatar-uploader"
            :action="domain"
            :data="QiniuData"
            :show-file-list="false"
            :on-remove="handleRemove"
            :on-success="uploadSuccess1"
            :before-upload="beforeAvatarUpload1">
            <img v-if="temp.projectBgimg" :src="temp.projectBgimg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
         </el-form-item>
        <el-form-item label="标题" prop="title" >
          <el-input v-model="temp.title"/>
        </el-form-item>
         <el-form-item label="简介" prop="contentInfo" >
                    <el-input
                v-model="temp.contentInfo"
                :rows="2"
                type="textarea"
                placeholder="项目简介"
              />
        </el-form-item>
         <el-form-item label="项目联系人" prop="projectContacts">
          <el-input v-model="temp.projectContacts" />
        </el-form-item>
         <el-form-item label="联系人电话" prop="contactsPhone">
          <el-input v-model="temp.contactsPhone" />
        </el-form-item>
         <el-form-item label="联系人微信" prop="contactsWx">
          <el-input v-model="temp.contactsWx" />
        </el-form-item>
       
         <el-form-item label="项目地址" prop="projectAddress">
          <el-input v-model="temp.projectAddress" />
        </el-form-item>
        <el-form-item label="标签" prop="tag">
          <el-input v-model="temp.tag" placeholder="每个tag用英文逗号隔开"/>
        </el-form-item>
       <el-form-item label="项目诚意金" prop="earnestPrice"  name="earnestPrice">
              <el-input-number v-model="temp.earnestPrice" :precision="2" :step="0.1" :max="100" />
        </el-form-item>
         <el-form-item label="成为家人充值金额" prop="projectFamily"  name="projectFamily">
              <el-input-number v-model="temp.projectFamily" :precision="2" :step="0.1" :max="1000" />
        </el-form-item>
          <el-form-item label="状态">
          <el-select v-model="temp.status" class="filter-item" placeholder="项目状态">
            <el-option label="审核通过" value="1" />
            <el-option label="待审核" value="0" />
            <el-option label="已拒绝" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="收银平台">
          <el-select v-model="temp.cashier" class="filter-item" placeholder="收银平台">
            <el-option label="哗啦啦" value="1" />
            <el-option label="其他" value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="项目图文说明">
          <tinymce v-model="temp.projectContent"  :height="300" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
            <router-link :to="{path:'/project/projectList'}">
        <el-button >
            取消
            </el-button>
        </router-link>
       
        <el-button type="primary" @click="updateData()">
          提交
        </el-button>
      </div>
  </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'

import { GQL } from '@/api/article'
import { getToken } from '@/api/qiniu'

const calendarTypeOptions = [
  { key: '1', display_name: '股权设立' },
  { key: '2', display_name: '股权转让' }
]
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name
  return acc
}, {})

export default {
  components: { Tinymce },
  data() {
    return {
      
      pid:'',
        calendarTypeOptions,
      temp: {
        title: '',
        type: '',
        status: '1',
        cashier:"0",
        pic:'',
        tag:'',
        contentInfo:'',
        projectContacts:'',
        contactsPhone:'',
        projectAddress:"",
        contactsWx:'',
        projectContent:'',
        projectBgimg:'',
        earnestPrice:"",
        projectFamily:"",

      },
      rules: {
        type: [{ required: true, message: 'type is required', trigger: 'change' }],
        title: [{ required: true, message: 'title is required', trigger: 'blur' }]
      },
      QiniuData: {
        key: "yssl1", //图片名字处理
        token: "" ,//七牛云token
        data:{}
      },
      domain: "http://upload-z2.qiniup.com", // 七牛云的上传地址（华东区）
      qiniuaddr: "http://r92t5xgkc.hn-bkt.clouddn.com", // 七牛云的
   
     
    }
  },
  created() {
    let id=this.$route.query.id;
   
    this.pid = id
    this.projectInfo()
    this.Qiniutoken()
  },
  methods: {
    Qiniutoken(){
        getToken().then(response => {
           this.QiniuData.token= response.data
           console.log('1111---', this.QiniuData.token)
        //   resolve(true)
        })
    },
    handleRemove(file, fileList) {
    this.uploadPicUrl = "";
    },
    handleExceed(files, fileList) {
        this.$message.warning(
            `当前限制选择一个文件，如需更换，请删除上一个文件在重新选择！`
        );
    },
    beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
    },
    beforeAvatarUpload(file) {   //图片上传之前的方法
        const isJPG = file.type === 'image/jpg';
        const isJPEG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        
        // const isOgg = file.type === "video/ogg";
      
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isJPEG && !isPNG ) {
          this.$message.error("上传文件只能是 jpeg,jpg,png 格式!");
          return false;
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
          return false;
        }
        // file.name = 
        var time = new Date().getTime();
        const filename = time + file.name;
        console.log('1---',filename)
        this.QiniuData.data = file;
        this.QiniuData.key = filename;
    },

    uploadSuccess(response, file, fileList) {  //图片上传成功的方法
      console.log('1---',response)
    // this.imageUrl = `${this.qiniuaddr}/${response.key}`;
      this.temp.pic = `${this.qiniuaddr}/${response.key}`;
    },
     beforeAvatarUpload1(file) {   //图片上传之前的方法
        const isJPG = file.type === 'image/jpg';
        const isJPEG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        
        // const isOgg = file.type === "video/ogg";
      
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isJPEG && !isPNG ) {
          this.$message.error("上传文件只能是 jpeg,jpg,png 格式!");
          return false;
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!");
          return false;
        }
        // file.name = 
        var time = new Date().getTime();
        const filename = time + file.name;
        
        this.QiniuData.data = file;
        this.QiniuData.key = filename;
    },

    uploadSuccess1(response, file, fileList) {  //图片上传成功的方法

    // this.imageUrl = `${this.qiniuaddr}/${response.key}`;
      this.temp.projectBgimg = `${this.qiniuaddr}/${response.key}`;
    },
    //获取项目信息
    projectInfo(){
         const query = {
               "operationName": "allSlProjects",
"query": "query allSlProjects($filter: SlProjectFilter) { allSlProjects( filter: $filter) { totalCount nodes { title projectFamily cashier earnestPrice projectBgimg type status pic pid uuid createTime contentInfo projectContacts contactsPhone projectContent } } }",
"variables":{"filter": {"pid": {"equalTo": this.pid}}}
        }
       GQL(query).then(response => {
          this.temp = response.data.allSlProjects.nodes[0]
        })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          let query = {
            "operationName": "updateSlProjectByPid",
            "query": "mutation updateSlProjectByPid($input: UpdateSlProjectByPidInput!) { updateSlProjectByPid(input: $input) { slProject { pid } } }",
            "variables": {input: {pid: this.pid, slProjectPatch:tempData}}
          }

          GQL(query).then((res) => {
               if(res.errors){
                  this.$notify({
                    title: '修改失败',
                    message: '修改项目失败',
                    type: 'error',
                    duration: 2000
                  })
              }else{
                  this.$notify({
                    title: '修改成功',
                    message: '修改项目成功',
                    type: 'success',
                    duration: 2000
                  })
                  
              }
       
          })
        }
      })
    },
  }
 
}
</script>
<style scoped>
.avatar{
    width: 100px;
}
</style>
